<template>
  <div class="wh100">
    <LoadingBox :loading="!show">
      <div class="common-content app-list">
        <div class="main-content" v-if="lists.length > 0">
          <div class="top-search-bar">
            <el-form size="small" ref="queryForm" inline>

              <el-form-item>
                <el-button
                    @click="$router.push({name:'AppTask'})"
                    type="primary"
                    size="small">任务管理器
                </el-button>
              </el-form-item>
              <el-form-item v-if="auth&&auth.add">
                <el-button
                    @click="addApplication"
                    type="primary"
                    size="small"
                    icon="el-icon-circle-plus-outline">应用开发
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-select
                    style="width: 160px;"
                    v-model="query.status"
                    placeholder="全部状态"
                    size="small"
                    clearable
                    @change="search">
                  <el-option label="运行完成" :value="0"></el-option>
                  <el-option label="运行中" :value="1"></el-option>
                  <el-option label="运行异常" :value="2"></el-option>
                  <el-option label="未运行" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                    style="width: 160px"
                    v-model="query.type"
                    placeholder="全部类型"
                    size="small"
                    clearable
                    @change="search">
                  <el-option label="单组件" :value="1"></el-option>
                  <el-option label="组合应用" :value="2"></el-option>
                  <el-option label="单应用" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input
                    style="width: 250px"
                    placeholder="输入应用名称或创建人"
                    size="small"
                    v-model="query.key"
                    clearable
                    @input="search">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()">搜索
                </el-button>
                <el-button
                    type="primary"
                    icon="el-icon-refresh-right"
                    @click="refresh()">刷新
                </el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="main-body">
            <el-row :gutter="20">
              <el-col
                  :span="8" :xs="24" :sm="12" :md="12" :lg="8"
                  v-for="(item, index) in lists"
                  :key="index">
                <div class="main-box">
                  <div class="application applicationUp">
                    <span class="status-label" :class="[ `app-status-${item.task.taskStateType}`]">
                      <i v-if="item.task.taskStateType === 0">执行完成</i>
                      <i v-else-if="item.task.taskStateType === 1">介入停止</i>
                      <i v-else-if="item.task.taskStateType === 2">异常结束</i>
                      <i v-else>正常</i>
                    </span>

                    <div class="applicationDesc">
                      <img class="applicationImage"
                           :src="`/static/images/app/status-${item.task.taskState}.png`"/>
                      <div style="margin-left: 30px">
                        <div class="title-group" :class="[
                        {'app-success':item.task.taskState === 0},
                        {'app-runing':item.task.taskState === 1},
                        {'app-error':item.task.taskState === 2},
                        {'app-default':item.task.taskState === 3}
                        ]">
                          <span class="title">{{ item.appName }}</span>
                          <span class="type" v-if="item.appType===1">【单组件应用】</span>
                          <span class="type" v-else-if="item.appType===2">【组合应用】</span>
                          <span class="type" v-else-if="item.appType===3">【单执行应用】</span>
                        </div>
                        <div class="applicationDescPadding">
                          {{ item.appScene }}
                        </div>
                      </div>
                    </div>
                    <div class="applicationBottom">
                      <div class="applicationBottomDesc">
                        <div class="header pd">开发人</div>
                        <div class="body pd">{{ item.userName }}</div>
                      </div>
                      <el-divider direction="vertical"></el-divider>
                      <div class="applicationBottomDesc">
                        <div class="header pd">开发时间</div>
                        <div class="body pd">{{ item.addTime }}</div>
                      </div>
                      <el-divider direction="vertical"></el-divider>

                      <div class="applicationBottomDesc">
                        <div class="header pd">组件数量</div>
                        <div class="body pd">
                          {{ item.pluginsNum ? item.pluginsNum : "未配置" }}
                        </div>
                      </div>
                      <el-divider direction="vertical"></el-divider>
                      <div class="applicationBottomDesc">
                        <div class="header pd">应用状态</div>
                        <div class="body pd">
                          <span v-if="item.task.taskState === 0">运行中</span>
                          <span v-if="item.task.taskState === 1">挂起</span>
                          <span v-if="item.task.taskState === 2">结束</span>
                          <span v-if="item.task.taskState === 3">未运行</span>
                          <!--{{// item.task.taskState == 0 ? "运行完成" : item.task.taskState == 1 ? "运行异常" : "未运行"}}-->
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="applicationMaskLayer">
                    <div class="app-btn-group">
                      <div class="btn-item">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="openApplicationData(item)">
                          <i class="el-icon-coin"></i>数据
                        </el-button>
                      </div>
                      <div class="btn-item">
                        <el-popover
                            v-if="item.task.taskState===0"
                            placement="top"
                            trigger="hover"
                            popper-class="btn-popover">
                          <el-button
                              slot="reference"
                              size="mini"
                              type="success">运行中
                          </el-button>
                          <div>
                            <div>
                              <el-button
                                  size="mini"
                                  type="danger"
                                  @click="appStop(item)">停止
                              </el-button>
                            </div>
                            <div class="mt10">
                              <el-button
                                  size="mini"
                                  type="warning"
                                  @click="appSuspend(item)">暂停
                              </el-button>
                            </div>
                          </div>
                        </el-popover>

                        <el-popover
                            v-else-if="item.task.taskState===1"
                            placement="top"
                            trigger="hover"
                            popper-class="btn-popover">
                          <el-button
                              slot="reference"
                              size="mini"
                              type="success">暂停中
                          </el-button>

                          <div>
                            <div>
                              <el-button
                                  size="mini"
                                  type="danger"
                                  @click="appStop(item)">停止
                              </el-button>
                            </div>
                            <div class="mt10">
                              <el-button
                                  size="mini"
                                  type="warning"
                                  @click="appResume(item)">恢复
                              </el-button>
                            </div>
                          </div>
                        </el-popover>

                        <el-button
                            v-else
                            size="mini"
                            type="success"
                            @click="runApp(item)">
                          <i class="el-icon-caret-right"></i>运行
                        </el-button>
                      </div>
                      <div class="btn-item">
                        <el-button size="mini" type="primary" @click="appInfo(item.id)">
                          <i class="el-icon-set-up"></i>详情
                        </el-button>
                      </div>
                      <div class="btn-item">
                        <el-button size="mini" type="warning" @click="ediApp(item.id)" v-if="auth&&auth.edit">
                          <i class="el-icon-guide"></i>更新
                        </el-button>
                      </div>
                      <div class="btn-item">
                        <el-button size="mini" type="danger" @click="appDel(item.id)" v-if="auth&&auth.del">
                          <i class="el-icon-guide"></i>删除
                        </el-button>
                      </div>
                    </div>
                  </div>

                  <!--运行弹窗-->
                  <div class="run-modal" v-if="item.runModal">
                    <div class="run-progress-group">
                      <el-progress
                          :text-inside="true"
                          :show-text="false"
                          :stroke-width="5"
                          :percentage="item.percentage"
                          status="success">
                      </el-progress>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>

            <div class="paginM">
              <el-pagination
                  :current-page.sync="query.page"
                  background
                  :page-size="9"
                  layout="prev, pager, next"
                  :total="total"
                  @current-change="currentChange">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="main-body no-data" v-else-if="show&&lists.length===0">暂无数据</div>

        <div class="qpsk-mask" v-if="showQpskLines">
          <div class="ComponenList_title">
            <div class="ComponenList_title_icon">
              <img src="../../../../static/images/title-icon.png" alt="">
            </div>
            <div class="title_text">{{qpskItem.appName}} 应用数据</div>
          </div>
          <div class="qpsk-mask-body">
            <div class="qpsk-mask-body-left">
              <div class="qpsk-mask-cont">
                <QpskLines v-if="qpskItem.appName ==='QPSK'" :data="appQpskStatusData"></QpskLines>
                <BpskLines v-if="qpskItem.appName ==='BPSK'" :data="appBpskStatusData"></BpskLines>
              </div>
            </div>
            <div class="qpsk-mask-body-right" v-if="showQpskLog">
              <div class="qpsk-log-body" v-if="qpskItem.appName ==='QPSK'" v-html="appQpskStatusData.data"></div>
              <div class="qpsk-log-body" v-if="qpskItem.appName ==='BPSK'" v-html="appBpskStatusData.data"></div>
            </div>
          </div>

          <div class="qpsk-mask-btns">
            <div class="qpsk-mask-btn">
              <el-button size="small" type="info" @click="closeQpskMsk">关闭</el-button>
            </div>
            <div class="qpsk-mask-btn">
              <el-button size="small" type="primary" v-if="showQpskLog" @click="qpskLog">关闭日志</el-button>
              <el-button size="small" type="primary" v-else @click="qpskLog">查看日志</el-button>
            </div>
          </div>
        </div>
      </div>
    </LoadingBox>
  </div>
</template>

<script>
import {get_getAApplication, post_appliesRun,} from "@/apis/appLC/applc";
import {del_deleteAApplication} from "@/apis/assembly/assembly";
import QpskLines from "./comp/QpskLines";
import BpskLines from "./comp/BpskLines";
import {debounce} from '@/utils'
import {mapGetters} from "vuex";

export default {
  hidden: true,
  components: {QpskLines, BpskLines},
  data() {
    return {
      show: false,
      showQpskLines: false,
      showQpskLog: false,
      qpskItem: null,
      auth: null,
      // 列表
      lists: [],
      query: {
        page: 1,
        key: '',
        status: "",
        type: ""
      },
      total: 0,


    };
  },
  computed: {
    ...mapGetters(['appQpskStatusData', 'appBpskStatusData'])
  },
  created() {
    this.getList();
  },
  mounted() {
  },
  methods: {
    // 列表
    getList() {
      this.show = false
      get_getAApplication({
        pageNum: this.query.page,
        aApplication: this.query.key || null,
        menuId: this.$route.meta.id,
        status: this.query.status,
        appType: this.query.type
      }).then((res) => {
        let {total, records} = res.data.data;
        this.auth = res.data.auth
        this.lists = records.map(item => {
          return {
            ...item,
            addTime: item.addTime ? this.$moment(item.addTime).format("YYYY-MM-DD") : '',
            editTime: item.editTime ? this.$moment(item.editTime).format("YYYY-MM-DD") : '',
            runModal: false,
            timer: null,
            percentage: 0,
          }
        });
        this.total = total;
        this.show = true
      });
    },
    // 搜索
    search: debounce(function () {
      this.getList();
    }, 200),
    // 刷新
    refresh() {
      this.getList();
    },
    //改变页数
    currentChange(val) {
      this.getList(val);
    },
    //更新应用
    ediApp(appId) {
      this.$router.push({name: "UpdateApp", query: {appId: appId}});
    },
    //应用详情
    appInfo(appId) {
      this.$router.push({name: 'Appdetail', query: {appid: appId}})
    },
    //添加应用
    addApplication() {
      this.$router.push({name: 'AppInfo'});
    },
    openApplicationData(item) {
      if (parseInt(item.appType) === 2) {
        this.$router.push({name: 'AppData', query: {appid: item.id}});
      } else {
        this.showQpskLines = true
        this.qpskItem = item
      }
    },
    //删除应用
    appDel(aApplicationId) {
      this.$confirm("是否删除所选应用?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        del_deleteAApplication({ids: [{id: aApplicationId}]}).then((res) => {
            let {msg} = res.data;
            this.$message({
              type: "success",
              message: msg,
            });
            this.getList();
          }
        );
      }).catch(() => {
      });
    },
    // 运行应用
    runApp(app) {
      app.runModal = true
      app.timer = setInterval(() => {
        if (app.percentage >= 80) {
          clearInterval(app.timer)
        } else {
          app.percentage += Math.floor(Math.random() * 10)
        }
      }, 50)

      if (parseInt(app.appType) === 2) {
        post_appliesRun({appId: app.id}).then((res) => {
          clearInterval(app.timer)
          app.percentage = 100
          setTimeout(() => {
            app.runModal = false
            this.getList();
            this.$message.success(res.data.msg)
          }, 1000)
        });
      } else {
        this.$api.appliesRunSingle({appId: app.id}).then((res) => {
          clearInterval(app.timer)
          app.percentage = 100
          setTimeout(() => {
            app.runModal = false
            this.getList();
            this.$message.success(res.data.msg)
          }, 1000)
        });
      }
    },
    // 暂停
    appSuspend(item) {
      this.$api.pauseTask({
        appId: item.id,
        id: item.task.id,
        taskName: item.task.taskName,
        taskState: item.task.taskState,
        taskStateType: item.task.taskStateType,
        taskThreadId: item.task.taskThreadId,
        vendorId: item.task.vendorId,
        taskOpenUser: item.task.taskOpenUser
      }).then(res => {
        this.$message.success(res.data.msg)
        this.getList();
      })
    },
    // 恢复
    appResume(item) {
      this.$api.recoverTask({
        appId: item.id,
        id: item.task.id,
        taskName: item.task.taskName,
        taskState: item.task.taskState,
        taskStateType: item.task.taskStateType,
        taskThreadId: item.task.taskThreadId,
        vendorId: item.task.vendorId,
        taskOpenUser: item.task.taskOpenUser
      }).then(res => {
        this.$message.success(res.data.msg)
        this.getList();
      })
    },
    // 停止
    appStop(item) {
      this.$api.stopRunTask({
        appId: item.id,
        id: item.task.id,
        taskName: item.task.taskName,
        taskState: item.task.taskState,
        taskStateType: item.task.taskStateType,
        taskThreadId: item.task.taskThreadId,
        vendorId: item.task.vendorId,
        taskOpenUser: item.task.taskOpenUser
      }).then(res => {
        this.$message.success(res.data.msg)
        this.getList();
      })
    },
    closeQpskMsk() {
      this.showQpskLines = false
      this.showQpskLog = false
    },
    qpskLog() {
      this.showQpskLog = !this.showQpskLog
    }
  }
}
</script>

<style lang="scss" scoped>
  $app-runing: #077CF6;
  $app-success: #17A9A8;
  $app-error: #E15A5A;
  $app-default: #3F5C7B;

  .app-list {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding: 15px;

    .main-content {
      display: flex;
      flex-direction: column;

      .main-body {
        .main-box {
          border-radius: 4px;
          position: relative;
          margin-bottom: 15px;
          overflow: hidden;

          .application {
            position: relative;
            color: #fff;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .status-label {
              position: absolute;
              top: 0;
              right: 0;
              background-color: rgba(0, 0, 0, 0.5);
              padding: 5px 10px;
              font-size: 12px;

              &.app-status-0 {
                background-color: $app-success;
              }

              &.app-status-1 {
                background-color: $app-runing;
              }

              &.app-status-2 {
                background-color: $app-error;
              }

              &.app-status-3 {
                background-color: $app-default;
              }
            }

            .applicationDesc {
              display: flex;
              height: 100px;
              padding: 20px;
              width: 100%;

              .title-group {
                &.app-success {
                  color: $app-success;
                }

                &.app-runing {
                  color: $app-runing;
                }

                &.app-error {
                  color: $app-error;
                }

                &.app-default {
                  color: $app-default;
                }

                .title {
                  font-size: 18px;
                  font-weight: bold;
                }
              }


              .applicationImage {
                width: 60px;
                height: 60px;
              }

              .applicationDescPadding {
                margin-top: 10px;
                color: #d6d3d3;
              }

              .applicationDescButton {
                color: #9d9dff;
                width: 84px;
                height: 30px;
                line-height: 30px;
                text-align: center;
              }

              .applicationDevButton {
                color: #26e426;
                width: 84px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                margin-top: 10px;
              }

              .applicationEorrButton {
                color: #ee5195;
                width: 84px;
                height: 30px;
                line-height: 30px;
                text-align: center;
              }
            }

            .applicationBottom {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;
              padding: 20px;
              background-color: rgba(0, 0, 0, 0.2);

              .applicationBottomDesc {
                text-align: center;

                .header {
                  color: #6c83c3;
                  padding-bottom: 5px;
                  font-weight: bold;
                }

                .body {
                  padding-top: 5px;
                  font-weight: bold;
                }
              }
            }
          }

          .applicationMaskLayer {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.4);

            .app-btn-group {
              width: 100%;
              position: absolute;
              bottom: 10px;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-around;

              .btn-item {
                width: 20%;
                text-align: center;
              }
            }
          }

          .application:hover .applicationDescButton {
            color: #fff;
            background: rgb(87, 87, 239);
            border-radius: 4px;
            cursor: pointer;
          }

          .application:hover .applicationDevButton {
            color: #fff;
            background: #26e426;
            border-radius: 4px;
            cursor: pointer;
          }

          .application:hover .applicationEorrButton {
            color: #fff;
            background: #ee5195;
            border-radius: 10px;
            cursor: pointer;
          }

          .applicationUp {
            border-radius: 4px;
            background-image: url("../../../assets/img/app-bg.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
          }

          .run-modal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            /*background: rgba(0, 0, 0, 0.4);*/
            z-index: 100;
            display: flex;
            align-items: flex-end;

            .run-progress-group {
              width: 100%;
              padding: 0 5px;
            }
          }
        }

        .main-box:hover .applicationMaskLayer {
          display: block;
        }
      }
    }

    .no-data {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px !important;
      font-size: 14px;
      overflow: hidden !important;
      color: #ffffff;
    }

    .paginM {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
  }

  .qpsk-mask {
    /*position: fixed;*/
    /*top: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*z-index: 100;*/
    /*background: rgba(0, 0, 0, .5);*/
    /*padding-top: 50px;*/
    /*overflow: auto;*/
    margin-top: 15px;
    border: solid 3px #0694ce;

    .ComponenList_title {
      flex-shrink: 0;
      position: relative;
      display: flex;
      align-items: center;
      height: 40px;
      font-weight: 700;
      color: #fff;
      border-bottom: solid 3px #0694ce;

      .ComponenList_title_icon {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 25px;
        height: 40px;
        display: flex;
        align-items: center;

        img {
          margin-left: 5px;
          width: 13px;
        }
      }

      .title_text {
        padding-left: 25px;
        color: #20c6fb;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .qpsk-mask-body {
      width: 100%;
      position: relative;
      display: flex;
      padding: 5px;

      .qpsk-mask-body-left {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;

        .qpsk-mask-cont {
          flex: 1;
        }
      }

      .qpsk-mask-body-right {
        width: 30%;
        height: 400px;
        padding: 5px;
        flex-shrink: 0;

        .qpsk-log-body {
          height: 100%;
          width: 100%;
          padding: 5px;
          border: solid 1px #0694ce;
          overflow: auto;
          color: #FFFFFF;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
    }

    .qpsk-mask-btns {
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: solid 3px #0694ce;

      .qpsk-mask-btn {
        & + .qpsk-mask-btn {
          margin-left: 15px;
        }
      }
    }
  }
</style>
